<template>
	<div class="login">
		<!-- 头像 -->
		<div class="logo_div">
			<img src="../assets/login/logo.png" />
		</div>
		<!-- 手机号框 -->
		<div class="input_div">
			<input type="tel"  placeholder="请输入手机号" />
		</div>
		<!-- 密码框 -->
		<div class="input_div pwd_div">
			<input type="password"  placeholder="请输入密码" />
		</div>
		<!-- 登录按钮 -->
		<div class="btn_div">	
			<button>登录</button>
		</div>
			<!-- 立即注册 -->
			<div class="reg_div">
				<span>立即注册</span>
				<span>忘记密码</span>
			</div>
	</div>
</template>

<script>
</script>

<style>
	/* 头像div距离样式 */
	.logo_div{
		margin-top: 120px;
		text-align: center;   /* 居中 */
	}
	
	/* 头像像素样式 */
	.logo_div img{
		width: 66px;    /* 宽 */
		height: 66px;   /* 高 */
	}
	/* 输入框div距离样式 */
	.input_div{
		margin-top: 40px;				/* 距离头像图片下40 */
		padding-left: 40px;				/* 左40 */
		padding-right: 40px;			/* 右40 */
		display: flex;					/* 弹性布局 */
	}
	/* 两个输入框样式 */
	.input_div input{
		height: 48px;
		background: #f9f9f9;			/* 背景色 */
		flex: 1;						/* 剩余的全部 */
		border: none;					/* 去掉原来的边框 */
		border: 1px solid #dadada;		/* 边框 1px像素  实线 颜色 */
		border-radius: 6px;				/* 输入框圆角 */
		font-size: 16px;				/* 字体大小 */
		color: #666666;					/* 字体颜色 */
		padding-left: 16px;				/* 字体距离边框距离 */
	}
	/* 两个输入框之间样式 */
	.pwd_div{
		margin-top: 16px;
	}
	/* 登录按钮div样式 */
	.btn_div{
		margin-top: 40px;				/* 登录按钮距离密码框的上下距离 */
		padding-left: 40px;				/* 内边距左40 */
		padding-right: 40px;			/* 内边距右40 */
		display: flex;					/* 弹性布局 */
	}
	/* 登录按钮样式 */
	.btn_div button{
		flex: 1;						/* 剩余的全部 */
		height: 48px;					/* 高 */
		background: #0091FF;			/* 背景色 */
		font-size: 16px;				/* 字体大小 */
		color: #FFFFFF;					/* 字体颜色 */
		border-radius: 4px;				/* 输入框圆角 */
		border: none;					/* 去掉原来的边框 */
		/* 缺投影 css自己找 */
	}
	/* 注册登录样式 */
	.reg_div{
		height: 50px;					/* 高 */
		text-align: center;				/* 居中 */
		line-height: 52px;				/* 行高居中 */
	}
	.reg_div span{
		font-size: 12px;				/* 字体大小 */
		color: #999999;					/* 字体颜色 */
		padding-left: 16px;				/* 内边距左40 */
		padding-right: 16px;			/* 内边距右40 */
	}
	/* .reg_div里面的第一个孩子:nth-child(第几个孩子) */
	.reg_div :nth-child(1){
		border-right:1px solid #dadada;		/* 中间的竖线 1px像素  实线 颜色 */
	}
</style>
